<template>
  <div class="loheader">
    <!--用户登录-->
    <div id="htop">
      <el-container>
        <div class="el-header">
          <el-header >
            <div class="logo">
              <a title="豆果美食" href="http://www.douguo.com/">豆果美食</a>
            </div>
          </el-header>
        </div>
        <!--        内容-->
        <div id="main">
          <el-main>
            <el-row>
              <el-col :span="12">
                <div style="margin-top: 120px;margin-left: 300px" class="grid-content bg-purple">
                  <img src="https://passport.douguo.com/public/img/web/sinin.png">
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">

                  <template>
                    <div >
                      <el-card class="box-card" style="margin-top: 40px;margin-left: 70px">
                        <el-tabs   v-model="activeName" @tab-click="handleClick" value="free"
                                   style="background-color: white;width: 350px;">
                          <el-tab-pane   label="注册用户" name="free">
                            <el-form :label-position="labelPosition" :ref="ruleForm">
                              <el-form-item>
                                <el-input v-model="user.username"placeholder="请输入用户名"></el-input>
                              </el-form-item><el-form-item>
                              <el-input v-model="user.password"placeholder="请输入登录密码"></el-input>
                            </el-form-item><el-form-item>
                              <el-input v-model="user.nickname"placeholder="请输入昵称"></el-input>
                            </el-form-item><el-form-item>
                              <el-input v-model="user.avatar"placeholder="请输入头像的图片链接，注意是链接！"></el-input>
                            </el-form-item>
                              <div>
                                <el-button type="warning" @click="submitRegForm('user')">注册</el-button>
                              </div>
                              <div class="font-c">
                                <template>
                                  <el-checkbox v-model="checked">我已阅读并且同意<a>豆果美食使用协议</a></el-checkbox>
                                </template>
                              </div>
                              <div class="font-a">
                                <el-row>
                                  <el-col :span="8" >
                                    <div>社交账号登录</div>
                                  </el-col>
                                  <el-col :span="16">
                                    <div>
                                      <el-row>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/wx.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微信
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/qq.png" style="width: 25px;height: 25px;
                            border-radius: 15px;vertical-align: middle;position: relative;right: 5px;bottom: 3px">QQ
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/weibo.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微博
                                          </div>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </el-form>
                          </el-tab-pane>

                          <el-tab-pane  label="密码登录" name="pass">
                            <el-form  ref="ruleForm" :model="user" :rules="rules">
                              <el-form-item>
                                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                              </el-form-item>
                              <el-form-item>
                                <el-input v-model="user.password" placeholder="请输入密码">
                                </el-input>
                              </el-form-item>

                              <div class="font-b" >
                                <el-button type="warning" @click="submitLoginForm('user')">登录</el-button>
                              </div>
                              <div >
                                <template>
                                  <el-checkbox v-model="checked">我已阅读并且同意<a>豆果美食使用协议</a></el-checkbox>

                                </template>
                              </div>
                              <div>
                                <el-row>
                                  <el-col :span="8" >
                                    <div class="font-a">社交账号登录</div>
                                  </el-col>
                                  <el-col :span="16">
                                    <div class="font-a">
                                      <el-row>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/wx.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微信
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/qq.png" style="width: 25px;height: 25px;
                            border-radius: 15px;vertical-align: middle;position: relative;right: 5px;bottom: 3px">QQ
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/weibo.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微博
                                          </div>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </el-form>
                          </el-tab-pane>

                        </el-tabs>
                      </el-card>
                    </div>
                  </template>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </div>
        <el-footer >
          <div class="footer_a">
            <a href="http://www.douguo.com/about.html">关于豆果</a> ·
            <a href="http://www.douguo.com/hr.html">在豆果工作</a> ·
            <a href="http://www.douguo.com/user/feedback">意见反馈</a> ·
            <a href="http://www.douguo.com/links.html">友情链接</a> ·
            <a href="http://www.douguo.com/allrecipes/">菜谱大全</a> ·
            <a href="http://www.douguo.com/brand">品牌馆</a>
          </div>
          <div class="footer_a"style="color: #999" >
            ©2009-2015
            <a style="color: #999" href="http://www.douguo.com/">北京豆果信息技术有限公司</a>
            <a style="color: #999" href="http://www.miibeian.gov.cn//">京ICP证111032号</a>
            京公网安备11010102001133号 京网文[2014]0774-174号
          </div>
        </el-footer>
      </el-container>

    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      $: "",
      activeName: 'free',
      labelPosition: 'right',
      user: {username: "", password: "",nickname:"",avatar:""},
      radio: '1',
      checked: true,
      // 表单
      ruleForm: {
        username: 'root',
        password: '123456'
      },
      // 表单规则
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ]
      }
    }

  },
  methods: {

    // 提交login表单
    submitLoginForm(formName) {
      console.log("提交login表单");
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
          let url = 'http://localhost:8889/user/login';
          console.log('url = ' + url);

          let formData = this.qs.stringify(this.user);
          console.log('formData = ' + formData);

      this.axios
          .post(url, formData).then((response) => {
            let responseBody = response.data;
            console.log(responseBody);
            if (responseBody.state == 20000) {
              this.$message({
                showClose: true,
                message: '登录成功！',
                type: 'success'
              });
              let loginInfo = responseBody.data;
              //把jwt中用户名存到浏览器
              const payloadBase64 = loginInfo.split('.')[1];
              const payload = JSON.parse(window.atob(payloadBase64));
              const userId = payload.id;
              localStorage.setItem('userId', userId);
              // let loginInfoJsonString = JSON.stringify(loginInfo);
              //把jwt存入浏览器
              localStorage.setItem('loginInfo', loginInfo);

              console.log('已经将登录信息存入到localStorage中，即将跳转页面……');
              this.$router.push('/homepage');
            } else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
          });
        // } else {
        //   console.log('error submit!!');
        //   return false;
        // }

    },
    //注册表单提交
    submitRegForm(formName) {
      console.log("提交注册表单");
      //todo validate方法不能用...
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
          let url = 'http://localhost:8889/user/register';
          console.log('url = ' + url);

          let formData = this.qs.stringify(this.user);
          console.log('formData = ' + formData);

      this.axios
          .post(url, formData).then((response) => {
            let responseBody = response.data;
            console.log(responseBody);
            if (responseBody.state == 20000) {
              this.$message({
                showClose: true,
                message: '注册成功！',
                type: 'success'
              });

              console.log('注册成功，即将跳转页面……');
              this.$router.push('/homepage');
            } else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
          });
        // } else {
        //   console.log('error submit!!');
        //   return false;
        // }

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {
    //加载所有的分类
    this.loadFirstCategoryList();
    this.loadSecondCategoryList();
    this.loadThirdCategoryList();
  }
}

</script>

<style>
.font{

}

.box-card {
  background-color: #fff;
  width: 400px;
  min-height: 480px;
  float: contour;
  border-radius: 2px;
  font-family: "Microsoft Yahei", Tahoma, Geneva, sans-serif;
}

body {

  font: 12px Tahoma, Geneva, sans-serif, "Microsoft Yahei";
  color: #333;
  background-repeat: no-repeat;
  text-align: center;
  width: 1200px;
  margin: 0 auto;
  background-color: #f8f8f7;
}

body{
  width: 100%;
  text-align: center;
}
.el-footer {
  padding: 0px;
  box-sizing: border-box;
  flex-shrink: 0;
}
/*html {*/
/*  background-color: #f8f8f7;*/
/*  -webkit-text-size-adjust: 100%;*/
/*  -ms-text-size-adjust: 100%*/
/*}*/


.loheader {

  margin-bottom: 40px;
  background-color: #fff;
  border-bottom: 1px solid #f3f3f3;
}
/*logo返回*/



.el-header{
  height: 90px;
}
main{
  background-color: #f8f8f7;

}
.font-a{
  margin-top: 150px;
}

.logo {
  float: left;
  width: 180px;
  height: 54px;
  background: url("https://passport.douguo.com/public/img/web/logo_lo.png?191218") ;
  line-height: 10em;
  overflow: hidden;
  margin-top: 20px;
  margin-left: 270px;
}
/*.grid-content bg-purple{*/
/*  margin-top: 500px;*/
/*}*/
.footer_a{
  width: 100%;
  background-color: #f8f8f7;
}
.footer_a > a {
  display: inline-block;
  text-decoration: none;
  margin-top: 20px;
  color: #333;

}

</style>


